<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="50%" title="岗位审核`">
    <el-form :model="dialogData.itemInfo" label-width="100px" label-suffix=" :">
      <div class="opt-title-box">
        <div class="info-title">异议基本信息</div>
      </div>
      <el-form-item label="类型">
        <el-select v-model="dialogData.itemInfo.applyType" placeholder="请选择类型" style="width: 100%">
          <el-option v-for="item in jubaoType" :label="item.label" :value="item.value" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="异议标题">
        <el-input v-model="dialogData.itemInfo.title" placeholder="请填写标题" maxlength="30" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input
          v-model="dialogData.itemInfo.content"
          placeholder="请填写要提现的问题"
          type="textarea"
          rows="4"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="凭证">
        <UploadImgs v-model:fileList="dialogData.reses" :file-size="3" width="160px" height="160px">
          <template #tip> 售后凭证 3M </template>
        </UploadImgs>
      </el-form-item>
      <div class="opt-title-box">
        <div class="info-title">异议处理</div>
      </div>
      <el-form-item label="处理结果">
        <el-input
          v-model="dialogData.itemInfo.content"
          placeholder="请填写处理结果"
          type="textarea"
          rows="4"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="btnLoading">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { reactive, ref } from "vue";
// import { ElMessage } from "element-plus";
// import { getAbnormalInfo, auditJobFailedByDealer } from "@/api/modules/dealer/job";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { jubaoType } from "@/biz/datas/appData";

//页面的数据
interface JobDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  reses?: [];
  //当前的数据对象
  itemInfo: { id: string; title: string; content?: string; applyType?: number };
}

// 避免多次提交
const btnLoading = ref(false);

//弹出框的参数
const dialogVisible = ref(false);
//当前表单数据在这里初始化
const dialogData = reactive<JobDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  itemInfo: {
    id: "",
    title: ""
  }
});

//初始化页面的数据
const initItemInfo = (): void => {
  dialogData.itemInfo = {
    id: "",
    title: ""
  };
};
// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogData.rowData = params.rowData;

  initItemInfo();
  if (dialogData.rowData) {
    dialogData.itemInfo.id = dialogData.rowData.id;
  }

  dialogVisible.value = true;
};
// 审核通过
const handleSubmit = async () => {
  console.log("提交数据");
};

//页面事件
// const emits = defineEmits(["refresh-list"]);

//页面参数
defineExpose({
  acceptParams
});
</script>

<style scoped lang="scss">
.audit-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;

  width: 100%;
  height: 100%;

  .left-box {
    // border: 1px solid red;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .true_btn {
      width: 80%;
      height: 118px;
      font-size: 1.8rem;
      margin-top: 10px;
    }
  }
  .right-box {
    // border: 1px solid red;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .info-item {
      // border: 1px solid red;
      width: 100%;
      margin: 10px;
    }

    .false_btn {
      width: 100%;
    }
  }
}
</style>
